<template>
	<view>

		<view class="">


			<view class="form xbgf pr xbs">
				<view class="xflex-x-between" @click="room.show = !room.show">
					<view class="xflex-x xp32">
						<view class="form-span">

						</view>
						<view class="form-name">
							请选择房间类型
						</view>
					</view>

					<view class="fj xflex-x">
						<view class="fj-name">
							{{room.typeName?room.typeName:''}}
						</view>
						<image class="fj-icon" src="/static/image/mine/xia1.png" mode=""></image>
					</view>
				</view>

				<view class="xl pa" v-if="room.show">
					<view class="">
						<view class="xl-item" @click="onType(item)" :class="info.type_id == item.id?'xl-active':''"
							v-for="(item,index) in room.list">
							{{item.name}}
						</view>

					</view>
				</view>
			</view>

			<view class="form xbgf  xbs xmt24">
				<view class="xflex-x-between">
					<view class="xflex-x xp32">
						<view class="form-span">

						</view>
						<view class="form-name">
							房间类别
						</view>
					</view>

					<view class="xz xflex-x">
						<view class="xz-item xflex-x" @click="oncategory('calendar')">
							<image class="xz-item-icon" v-if="info.category.includes('calendar')"
								src="/static/image/mine/xz.png" mode=""></image>
							<image class="xz-item-icon" v-else src="/static/image/mine/wxz.png" mode=""></image>
							<view class="xz-item-text">
								日历房
							</view>
						</view>

						<view class="xz-item xflex-x" @click="oncategory('discount')">
							<image class="xz-item-icon" v-if="info.category.includes('discount')"
								src="/static/image/mine/xz.png" mode=""></image>
							<image class="xz-item-icon" v-else src="/static/image/mine/wxz.png" mode=""></image>
							<view class="xz-item-text">
								特价房
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="form xbgf xpb32 xmt24">
				<view class="xflex-x xp32">
					<view class="form-span">

					</view>
					<view class="form-name">
						房间名称
					</view>
				</view>

				<view class="form-input xpl32 xpr32 xbs">
					<input type="text" v-model="info.name" placeholder="请输入房间名称" />
				</view>
			</view>

			<!-- <view class="form xbgf  xbs xmt24">
				<view class="xflex-x-between">
					<view class="xflex-x xp32">
						<view class="form-span">

						</view>
						<view class="form-name">
							房间价格
						</view>
					</view>

					<view class="price xflex-x">
						<input class="price-ipt" type="text" v-model="info.price" placeholder="请输入价格" />
						<view class="price-text">
							元
						</view>
					</view>
				</view>
			</view> -->


			<!-- <view class="form xbgf  xbs xmt24">
				<view class="xflex-x-between">
					<view class="xflex-x xp32">
						<view class="form-span">

						</view>
						<view class="form-name">
							房间库存
						</view>
					</view>

					<view class="number xflex-x">
						<image class="number-icon" @click="onstock('jian')" src="/pagesA/static/images/jian.png"
							mode=""></image>
						<view class="number-num">
							{{info.stock}}
						</view>
						<image class="number-icon" @click="onstock('jia')" src="/pagesA/static/images/jia.png" mode="">
						</image>
					</view>
				</view>
			</view> -->

			<view class="form xbgf xpb32 xmt24">
				<view class="xflex-x xp32">
					<view class="form-span">

					</view>
					<view class="form-name">
						房间基本介绍
					</view>
				</view>

				<view class="form-input xpl32 xpr32 xbs">
					<u--textarea v-model="info.intro" placeholder="请输入内容"></u--textarea>
				</view>
			</view>
			
			
			<view class="form xbgf  xbs xmt24">
				<view class="xflex-x-between">
					<view class="xflex-x xp32">
						<view class="form-span">
			
						</view>
						<view class="form-name">
							餐食说明
						</view>
					</view>
			
					<view class="xz xflex-x">
						<view class="xz-item xflex-x" @click="info.meals = 1">
							<image class="xz-item-icon" v-if="info.meals == 1"
								src="/static/image/mine/xz.png" mode=""></image>
							<image class="xz-item-icon" v-else src="/static/image/mine/wxz.png" mode=""></image>
							<view class="xz-item-text">
								含早餐
							</view>
						</view>
			
						<view class="xz-item xflex-x" @click="info.meals = 0">
							<image class="xz-item-icon" v-if="info.meals == 0"
								src="/static/image/mine/xz.png" mode=""></image>
							<image class="xz-item-icon" v-else src="/static/image/mine/wxz.png" mode=""></image>
							<view class="xz-item-text">
								不含早餐
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="form xbgf  xbs xmt24">
				<view class="xflex-x-between">
					<view class="xflex-x xp32">
						<view class="form-span">
			
						</view>
						<view class="form-name">
							停车说明
						</view>
					</view>
			
					<view class="xz xflex-x">
						<view class="xz-item xflex-x" @click="info.stopcar = 'free'">
							<image class="xz-item-icon" v-if="info.stopcar == 'free'"
								src="/static/image/mine/xz.png" mode=""></image>
							<image class="xz-item-icon" v-else src="/static/image/mine/wxz.png" mode=""></image>
							<view class="xz-item-text">
								停车免费
							</view>
						</view>
			
						<view class="xz-item xflex-x" @click="info.stopcar = 'charge'">
							<image class="xz-item-icon" v-if="info.stopcar == 'charge'"
								src="/static/image/mine/xz.png" mode=""></image>
							<image class="xz-item-icon" v-else src="/static/image/mine/wxz.png" mode=""></image>
							<view class="xz-item-text">
								停车收费
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="xmt32 xpb32 xbgf xp32 xmt24">
				<view class="xflex-x">
					<view class="wmpopup-span">

					</view>
					<view class="xfz32 xmt12 xc1">
						房型标签
					</view>

				</view>
				<view class="wmpopup-leve xmt32">
					<view class="wmpopup-leve-item  xflex-x-center" @click="onlabel(item)"
						:class="info.label_ids.includes(item.id) ?'active':''" v-for="(item,index) in room.typeLabel"
						:key="index">
						{{item.name}}
					</view>
				</view>
			</view>




			<view class="form xbgf xpb32">
				<view class="xflex-x xp32">
					<view class="form-span">

					</view>
					<view class="form-name">
						添加房间首图
					</view>
				</view>

				<view class="form-inputs xpl32 xpr32 xbs xbgf xflex-x">

					<view class="form-imgs pr xmr20" v-for="(item,index) in info.image" :key="index">
						<image class="form-imgs-img" :src="item.fullurl" mode=""></image>
						<image class="form-imgs-gb pa" @click="cancel1(index)" src="/pagesA/static/images/guanbi2.png"
							mode=""></image>
					</view>
					<view class="form-upload xflex-y-center" @click="chooseImage()" v-if="info.image.length<1">
						<image class="form-upload-icon" src="/pagesA/static/images/xiangji.png" mode=""></image>
						<view class="form-upload-text">
							添加图片
						</view>
					</view>
				</view>

			</view>


			<view class="form xbgf xpb32">
				<view class="xflex-x xp32">
					<view class="form-span">

					</view>
					<view class="form-name">
						添加房间详情图片
					</view>
				</view>

				<view class="form-inputs xpl32 xpr32 xbs xbgf xflex-x">

					<view class="form-imgs pr xmr20" v-for="(item,index) in info.images" :key="index">
						<image class="form-imgs-img" :src="item.fullurl" mode=""></image>
						<image class="form-imgs-gb pa" @click="cancel2(index)" src="/pagesA/static/images/guanbi2.png"
							mode=""></image>
					</view>
					<view class="form-upload xflex-y-center" @click="chooseImage1()">
						<image class="form-upload-icon" src="/pagesA/static/images/xiangji.png" mode=""></image>
						<view class="form-upload-text">
							添加图片
						</view>
					</view>
				</view>

			</view>

		</view>

		<view class="next" @click="gethouseadd()">
			上传
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		partnertype,
		typeLabel,
		houseadd,
		hoteltype,
		uploadFile
	} from '/network/home.js'

	let info = reactive({
		type_id: '',
		category: ['calendar'],
		name: '',
		price: '',
		stock: 1,
		intro: '',
		label_ids: [],
		image: [],
		images: [],
		meals:1,
		stopcar:"free"
	})

	let room = reactive({
		list: [],
		typeName: '',
		typeLabel: [],
		show:false
	})

	// 添加标签
	const onlabel = (data) => {
		console.log(data);
		if (info.label_ids.includes(data.id)) {
			info.label_ids.splice(info.label_ids.indexOf(data.id), 1)
		} else {
			info.label_ids.push(data.id)
		}

		console.log(info.label_ids);
	}

	// 房间类型
	const onType = (data) => {
		info.type_id = data.id
		room.typeName = data.name
		room.show = false
	}

	typeLabel().then(res => {
		console.log(res);
		room.typeLabel = res.data
	})
	
	// 重置 info 对象的函数  
	function resetInfo() {  
		info.type_id = '';  
		info.category = ['calendar']; // 初始时 category 有一个 'calendar'，但这里我们重置为空数组  
		info.name = '';  
		info.price = '';  
		info.stock = 1; // 如果想要重置为 0 或其他值，可以修改这里  
		info.intro = '';  
		info.label_ids = [];  
		info.image = [];  
		info.images = [];  
	} 
	
	const gethouseadd = () =>{
		console.log("=添加");
		
		if(info.type_id=='') {
			uni.showToast({
				icon:"none",
				title:"请选择房间类型"
			})
			return
		}
		
		if(info.name=='') {
			uni.showToast({
				icon:"none",
				title:"请填写房间名称"
			})
			return
		}
		
		// if(info.price=='') {
		// 	uni.showToast({
		// 		icon:"none",
		// 		title:"请填写价格"
		// 	})
		// 	return
		// }
		// if(info.intro=='') {
		// 	uni.showToast({
		// 		icon:"none",
		// 		title:"请填写房间基本介绍"
		// 	})
		// 	return
		// }
	
		
		// if(info.label_ids.length == 0) {
		// 	uni.showToast({
		// 		icon:"none",
		// 		title:"请添加房间标签"
		// 	})
		// 	return
		// }
		if(info.image.length == 0) {
			uni.showToast({
				icon:"none",
				title:"请上传房间首图"
			})
			return
		}
		if(info.images.length == 0) {
			uni.showToast({
				icon:"none",
				title:"请上传房间详情图片"
			})
			return
		}
		
		
		
		info.image = info.image[0].url
		let arr = []
		info.images.forEach(item=>{
			arr.push(item.url)
		})
		info.images = arr
		houseadd(info).then(res=>{
			
			resetInfo()
			uni.showToast({
				icon:"none",
				title:"添加成功"
			})
		})
	}

	// 获取房型
	const getroom = () => {
		// info.category.forEach(item => {
		// 	partnertype({
		// 		category: item
		// 	}).then(res => {
		// 		console.log(res);
		// 		arr.push(...res.data.lists)
		// 	})
		// })\
		hoteltype().then(res=>{
			room.list =res.data
		})

	}
	
	const chooseImage = () => {
		uni.chooseImage({
			success: async function(chooseImageRes) {
				const lists = chooseImageRes.tempFilePaths;
				let arr = []
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFile(lists[i]);
					console.log(result);
	
					info.image.push({
						...result.data,
					})
				}
			}
		});
	}
	
	const chooseImage1 = () => {
		uni.chooseImage({
			success: async function(chooseImageRes) {
				const lists = chooseImageRes.tempFilePaths;
				let arr = []
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFile(lists[i]);
					console.log(result);
	
					info.images.push({
						...result.data,
					})
				}
			}
		});
	}
	
	const cancel1 = (index) => {
		info.image.splice(index, 1)
	}
	
	const cancel2 = (index) => {
		info.images.splice(index, 1)
	}
	
	const add = () =>{
		info.image = info.image[0].url
		let arr = []
		info.images.forEach(item=>{
			arr.push(item.url)
		})
		info.images = arr
		hoteladd(info).then(res=>{
			uni.showToast({
				icon:"none",
				title:"添加成功"
			})
			
		})
	}

	// 数量加减
	const onstock = (type) => {
		if (type == 'jian') {
			if (info.stock == 1) return
			info.stock = info.stock - 1
		} else {
			info.stock = info.stock + 1
		}
	}
	getroom()
	// 点击类别
	const oncategory = (data) => {
		info.category[0] = data
		// if (info.category.includes(data)) {
		// 	if (info.category.length == 1) return
		// 	info.category.splice(info.category.indexOf(data), 1)
		// } else {
		// 	info.category.push(data)
		// }
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.steps {
		padding: 40rpx 0 20rpx 0;

		&-xx {
			width: 150rpx;
			// height: 2rpx;
			border: 2px dashed #CCCCCC;

		}

		&-item {

			&-yuan {
				width: 40rpx;
				height: 40rpx;
				background: linear-gradient(90deg, #0DBFFB, #198EFF);
				border-radius: 50%;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 40rpx;
			}

			&-text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #333333;
				margin-top: 10rpx;
			}


		}
	}

	.form {

		&-span {
			width: 8rpx;
			height: 30rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			margin-right: 8rpx;
		}

		&-name {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #444444;
		}

		&-input {
			width: 690rpx;
			min-height: 80rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin: auto;
			padding: 20rpx;
			box-sizing: border-box;
		}

		&-inputs {
			width: 690rpx;
			min-height: 80rpx;
			border-radius: 6rpx;
			margin: auto;
			padding: 20rpx;
			box-sizing: border-box;
		}

		&-addicon {
			width: 28rpx;
			height: 28rpx;
		}

		&-addname {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #62BAF8;
		}

		&-address {
			width: 690rpx;
			min-height: 80rpx;
			border-radius: 6rpx;
			border: 1px solid #CCCCCC;
			padding: 24rpx 27rpx;
			box-sizing: border-box;
			margin: auto;
			margin-bottom: 24rpx;
		}

		&-qh {
			margin-right: 27rpx;

			&-num {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}

			&-icon {
				width: 24rpx;
				height: 24rpx;
			}
		}

		&-upload {
			width: 120rpx;
			height: 120rpx;
			background: #F8F8F8;
			border-radius: 10rpx;

			&-icon {
				width: 60rpx;
				height: 60rpx;
			}

			&-text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #666666;
				margin-top: 6rpx;
			}
		}

		&-imgs {
			width: 120rpx;
			height: 120rpx;
			background: #000000;
			border-radius: 10rpx;

			&-img {
				width: 100%;
				height: 100%;
			}

			&-gb {
				width: 40rpx;
				height: 40rpx;
				z-index: 1;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.next {
		width: 620rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin: auto;
	}

	

	.wmpopup {




		&-span {
			width: 8rpx;
			height: 30rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			margin-right: 7rpx;
			margin-top: 6rpx;
		}

		&-leve {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 18rpx;

			&-item {
				// width: 162rpx;
				height: 50rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;

			}
			
			.active {
				background: #0EBBFB !important;
				color: #FFFFFF !important;
			}
		}
	}

	.success {
		width: 182rpx;
		height: 182rpx;
		margin-top: 125rpx;
	}

	.successtit {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		margin-top: 28rpx;
	}

	.fj {

		&-name {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #0DBEFB;
		}

		&-icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 25rpx;
			margin-right: 60rpx;
		}
	}

	.xz {

		&-item {
			margin-right: 63rpx;

			&-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 18rpx;
			}

			&-text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}

	.number {
		margin-right: 45rpx;

		&-icon {
			width: 40rpx;
			height: 40rpx;
		}

		&-num {
			width: 90rpx;
			height: 40rpx;
			background: #F8F8F8;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			text-align: center;
			line-height: 40rpx;
		}
	}

	.price {

		&-ipt {
			width: 148rpx;
			height: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #999999;
			margin-right: 22rpx;
		}

		&-text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			margin-right: 46rpx;
		}


	}

	.xl {
		width: 750rpx;
		height: 100vh;
		background: #00000055;
		border-radius: 0rpx 0rpx 24rpx 24rpx;
		// bottom: 0;
		z-index: 999;

		&-active {
			color: #0DBEFB !important;
		}

		&-item {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;

			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			padding: 37rpx 48rpx;
			box-sizing: border-box;
		}
	}
</style>